<template>
    <div v-if="config.show"
        style="position: fixed;left: 0;top: 0;background-color: #fff;z-index: 9900;transition: opacity .2s cubic-bezier(0.23, 1, 0.320, 1);width: 100vw;height: 100vh;"
        :style="{
            opacity: config.show > 1 ? 1 : 0,
        }">

    </div>
</template>

<script setup>
import { ref, reactive, defineProps, computed, watch, onMounted, onBeforeUnmount } from 'vue'
import store from '../module/store'
import tool from '../module/tool'

const config = ref({
    show: 0,
    async control(op) {
        if (op) {
            this.show = 2
        } else {
            this.show = 1
            await tool.wait(0.3)
            this.show = 0
        }
    }
})

onMounted(async () => {
    store.onChange('controlCoverForm', () => {
        let data = store.getItem('controlCoverForm')
        config.value.control(data.op)
    })
})
</script>

<style scoped></style>